<script lang="ts" setup>
import { reactive, ref } from 'vue'
import TnSwitch from '@tuniao/tnui-vue3-uniapp/components/switch/src/switch.vue'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'
import TnNavbar from '@tuniao/tnui-vue3-uniapp/components/navbar/src/navbar.vue'

import { useAppI18n } from '@/hooks/use-i18n'

const { t } = useAppI18n()

// 隐私设置数据
const privacySettings = reactive({
  profileVisibility: true,
  locationPermission: false,
  cameraPermission: false,
  dataCollection: true,
  personalizedAds: false,
  analyticsTracking: true,
  autoLogin: false,
  biometricAuth: false
})

// 切换隐私设置
const togglePrivacy = (key: keyof typeof privacySettings, value: boolean) => {
  privacySettings[key] = value
  uni.setStorageSync('privacySettings', privacySettings)
  uni.showToast({
    title: value ? '已开启' : '已关闭',
    icon: 'success',
    duration: 1000
  })
}

// 保存设置
const saveSettings = () => {
  uni.setStorageSync('privacySettings', privacySettings)
  uni.showToast({
    title: '设置已保存',
    icon: 'success'
  })
}

// 重置设置
const resetSettings = () => {
  uni.showModal({
    title: '重置设置',
    content: '确定要重置所有隐私设置吗？',
    success: (res) => {
      if (res.confirm) {
        Object.assign(privacySettings, {
          profileVisibility: true,
          locationPermission: false,
          cameraPermission: false,
          dataCollection: true,
          personalizedAds: false,
          analyticsTracking: true,
          autoLogin: false,
          biometricAuth: false
        })
        uni.removeStorageSync('privacySettings')
        uni.showToast({
          title: '设置已重置',
          icon: 'success'
        })
      }
    }
  })
}

// 查看隐私政策
const viewPrivacyPolicy = () => {
  uni.showModal({
    title: '隐私政策',
    content: '我们非常重视您的隐私保护。我们承诺不会收集不必要的个人信息，不会将您的信息出售给第三方。',
    showCancel: false,
    confirmText: '我知道了'
  })
}

// 导出数据
const exportData = () => {
  uni.showLoading({ title: '导出中...' })
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '数据导出成功',
      icon: 'success'
    })
  }, 2000)
}

// 删除账户
const deleteAccount = () => {
  uni.showModal({
    title: '删除账户',
    content: '删除账户将永久删除您的所有数据，此操作不可恢复。确定要继续吗？',
    confirmText: '删除',
    confirmColor: '#ff4757',
    success: (res) => {
      if (res.confirm) {
        uni.showModal({
          title: '最终确认',
          content: '请输入"DELETE"确认删除账户',
          editable: true,
          placeholderText: '请输入DELETE',
          success: (res2) => {
            if (res2.confirm && res2.content === 'DELETE') {
              uni.showLoading({ title: '删除中...' })
              setTimeout(() => {
                uni.hideLoading()
                uni.showToast({
                  title: '账户已删除',
                  icon: 'success'
                })
                setTimeout(() => {
                  uni.clearStorageSync()
                  uni.reLaunch({ url: '/pages/login/index' })
                }, 1500)
              }, 2000)
            }
          }
        })
      }
    }
  })
}

// 加载设置
const loadSettings = () => {
  const savedSettings = uni.getStorageSync('privacySettings')
  if (savedSettings) {
    Object.assign(privacySettings, savedSettings)
  }
}

loadSettings()
</script>

<template>
  <view class="privacy-page">
    <!-- 自定义导航栏 -->
    <TnNavbar
      :fixed="true"
      :transparent="false"
      :title="t('settings.privacy')"
      :background-color="'#ffffff'"
      :color="'#000000'"
    />
    
    <view class="page-content">
      <view class="page-header">
        <view class="header-title">{{ t('settings.privacy') }}</view>
        <view class="header-desc">管理您的隐私和数据设置</view>
      </view>
    
    <!-- 个人信息设置 -->
    <view class="settings-section">
      <view class="section-title">个人信息</view>
      <view class="settings-list">
        <view class="setting-item">
          <view class="item-left">
            <view class="item-icon tn-gradient-bg__cool-1">
              <TnIcon name="user-fill" />
            </view>
            <view class="item-content">
              <view class="item-title">个人资料可见性</view>
              <view class="item-desc">允许其他用户查看您的个人资料</view>
            </view>
          </view>
          <TnSwitch 
            :value="privacySettings.profileVisibility"
            @change="(value) => togglePrivacy('profileVisibility', value)"
          />
        </view>
        
        <view class="setting-item">
          <view class="item-left">
            <view class="item-icon tn-gradient-bg__cool-2">
              <TnIcon name="location-fill" />
            </view>
            <view class="item-content">
              <view class="item-title">位置信息</view>
              <view class="item-desc">允许应用获取您的位置信息</view>
            </view>
          </view>
          <TnSwitch 
            :value="privacySettings.locationPermission"
            @change="(value) => togglePrivacy('locationPermission', value)"
          />
        </view>
        
        <view class="setting-item">
          <view class="item-left">
            <view class="item-icon tn-gradient-bg__cool-3">
              <TnIcon name="camera-fill" />
            </view>
            <view class="item-content">
              <view class="item-title">相机权限</view>
              <view class="item-desc">允许应用使用您的相机</view>
            </view>
          </view>
          <TnSwitch 
            :value="privacySettings.cameraPermission"
            @change="(value) => togglePrivacy('cameraPermission', value)"
          />
        </view>
      </view>
    </view>
    
    <!-- 数据收集设置 -->
    <view class="settings-section">
      <view class="section-title">数据收集</view>
      <view class="settings-list">
        <view class="setting-item">
          <view class="item-left">
            <view class="item-icon tn-gradient-bg__cool-4">
              <TnIcon name="data-fill" />
            </view>
            <view class="item-content">
              <view class="item-title">数据收集</view>
              <view class="item-desc">允许收集使用数据以改善服务</view>
            </view>
          </view>
          <TnSwitch 
            :value="privacySettings.dataCollection"
            @change="(value) => togglePrivacy('dataCollection', value)"
          />
        </view>
        
        <view class="setting-item">
          <view class="item-left">
            <view class="item-icon tn-gradient-bg__cool-5">
              <TnIcon name="ad-fill" />
            </view>
            <view class="item-content">
              <view class="item-title">个性化广告</view>
              <view class="item-desc">基于您的兴趣显示个性化广告</view>
            </view>
          </view>
          <TnSwitch 
            :value="privacySettings.personalizedAds"
            @change="(value) => togglePrivacy('personalizedAds', value)"
          />
        </view>
        
        <view class="setting-item">
          <view class="item-left">
            <view class="item-icon tn-gradient-bg__cool-6">
              <TnIcon name="chart-fill" />
            </view>
            <view class="item-content">
              <view class="item-title">分析追踪</view>
              <view class="item-desc">收集使用数据用于产品分析</view>
            </view>
          </view>
          <TnSwitch 
            :value="privacySettings.analyticsTracking"
            @change="(value) => togglePrivacy('analyticsTracking', value)"
          />
        </view>
      </view>
    </view>
    
    <!-- 安全设置 -->
    <view class="settings-section">
      <view class="section-title">安全设置</view>
      <view class="settings-list">
        <view class="setting-item">
          <view class="item-left">
            <view class="item-icon tn-gradient-bg__cool-7">
              <TnIcon name="lock-fill" />
            </view>
            <view class="item-content">
              <view class="item-title">自动登录</view>
              <view class="item-desc">记住登录状态，下次自动登录</view>
            </view>
          </view>
          <TnSwitch 
            :value="privacySettings.autoLogin"
            @change="(value) => togglePrivacy('autoLogin', value)"
          />
        </view>
        
        <view class="setting-item">
          <view class="item-left">
            <view class="item-icon tn-gradient-bg__cool-8">
              <TnIcon name="fingerprint-fill" />
            </view>
            <view class="item-content">
              <view class="item-title">生物识别</view>
              <view class="item-desc">使用指纹或面容ID登录</view>
            </view>
          </view>
          <TnSwitch 
            :value="privacySettings.biometricAuth"
            @change="(value) => togglePrivacy('biometricAuth', value)"
          />
        </view>
      </view>
    </view>
    
    <!-- 数据管理 -->
    <view class="settings-section">
      <view class="section-title">数据管理</view>
      <view class="settings-list">
        <view class="setting-item" @tap="viewPrivacyPolicy">
          <view class="item-left">
            <view class="item-icon tn-gradient-bg__cool-9">
              <TnIcon name="file-text-fill" />
            </view>
            <view class="item-content">
              <view class="item-title">隐私政策</view>
              <view class="item-desc">查看我们的隐私政策</view>
            </view>
          </view>
          <TnIcon name="right" />
        </view>
        
        <view class="setting-item" @tap="exportData">
          <view class="item-left">
            <view class="item-icon tn-gradient-bg__cool-10">
              <TnIcon name="download-fill" />
            </view>
            <view class="item-content">
              <view class="item-title">导出数据</view>
              <view class="item-desc">下载您的个人数据</view>
            </view>
          </view>
          <TnIcon name="right" />
        </view>
        
        <view class="setting-item danger" @tap="deleteAccount">
          <view class="item-left">
            <view class="item-icon tn-gradient-bg__cool-11">
              <TnIcon name="delete-fill" />
            </view>
            <view class="item-content">
              <view class="item-title">删除账户</view>
              <view class="item-desc">永久删除您的账户和所有数据</view>
            </view>
          </view>
          <TnIcon name="right" />
        </view>
      </view>
    </view>
    
    <!-- 操作按钮 -->
    <view class="action-buttons">
      <TnButton @click="saveSettings" type="primary">保存设置</TnButton>
      <TnButton @click="resetSettings" type="default">重置设置</TnButton>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.privacy-page {
  background-color: var(--tn-color-gray-light);
  min-height: 100vh;
}

.page-content {
  padding: 30rpx;
  padding-top: calc(30rpx + 88px);
}

.page-header {
  margin-bottom: 40rpx;
  
  .header-title {
    font-size: 36rpx;
    font-weight: bold;
    color: var(--tn-text-color-primary);
    margin-bottom: 10rpx;
  }
  
  .header-desc {
    font-size: 28rpx;
    color: var(--tn-text-color-secondary);
  }
}

.settings-section {
  margin-bottom: 40rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: var(--tn-text-color-primary);
    margin-bottom: 20rpx;
    padding-left: 20rpx;
  }
  
  .settings-list {
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    
    .setting-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx;
      border-bottom: 1rpx solid var(--tn-color-gray-light);
      
      &:last-child {
        border-bottom: none;
      }
      
      &.danger {
        .item-title {
          color: #ff4757;
        }
        
        .item-icon {
          background: linear-gradient(45deg, #ff4757, #ff3742) !important;
        }
      }
      
      .item-left {
        display: flex;
        align-items: center;
        flex: 1;
        
        .item-icon {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20rpx;
          color: #fff;
          font-size: 28rpx;
        }
        
        .item-content {
          flex: 1;
          
          .item-title {
            font-size: 32rpx;
            color: var(--tn-text-color-primary);
            margin-bottom: 8rpx;
          }
          
          .item-desc {
            font-size: 26rpx;
            color: var(--tn-text-color-secondary);
          }
        }
      }
      
      .tn-icon {
        color: var(--tn-text-color-secondary);
        font-size: 28rpx;
      }
    }
  }
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
</style> 